<template>
	<view class="empire-menu">
		<EmpireMenuItem
			v-for="(item, key) in list"
			:key="key"
			:name="item.name"
			:label="item.label"
			@menu-click="handleChange(item.name)"
		/>
	</view>
</template>

<script setup>
import EmpireMenuItem from './empire-menu-item.vue';
import { computed, provide, onMounted } from 'vue';

const model = defineModel('modelValue', {
	type: [String, Number],
	default: undefined
});
const props = defineProps({
	list: {
		type: Array,
		default: []
	}
});
provide('model', model);
const emits = defineEmits(['change']);
const menus = computed(() => props.list?.map((item) => item.name));

onMounted(() => {
	console.log(props.list);
});
function handleChange(value) {
	emits('change', value);
}
</script>

<style lang="scss" scoped>
.empire-menu {
	width: 100%;
	height: 100%;
}
</style>
